<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <!--<div style="margin-top:10px">-->
        <!--<el-button icon="el-icon-plus" type="primary" size="mini" @click="mergeData">合并</el-button>-->
        <!--<el-button icon="el-icon-close" type="danger" size="mini" @click="deleteAny">删除</el-button>-->
        <!--</div>-->
        <div class="query-form">
          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
            <el-form-item label="姓名" label-width="70px">
              <el-input v-model="tableSearchParam.employeeName" style="width:200px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号" label-width="70px">
              <el-input v-model="tableSearchParam.telphone" style="width:200px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="审批人" label-width="70px">
              <el-input v-model="tableSearchParam.auditBy" style="width:200px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="审批状态" label-width="70px">
              <el-select v-model="tableSearchParam.auditStatus" placeholder="请选择" style="width:200px" clearable>
                <el-option
                  v-for="item in options"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <rescuemanageraudittable ref="rescuemanageraudittable"
                                 v-bind:defaultCurrentPage="1"
                                 v-bind:defaultPageSize="10"
                                 v-bind:defaultTableSearchParam="{}"
                                 v-on:total="getTotal"></rescuemanageraudittable>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>

  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

</style>

<script>
  import rescuemanageraudittable from './common/rescueManagerAuditTable.vue'

  export default {
    components: {
      rescuemanageraudittable
    },
    data() {
      return {
        options: [
          {key: 0, value: '待审批'},
          {key: 2, value: '通过'},
          {key: 3, value: '拒绝'},
          {key: 1, value: '驳回修改'}
        ],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableSearchParam: {
          employeeName: '',
          telphone: '',
          auditBy: '',
          auditStatus: ''
        }
      }
    },
    methods: {
      listTableData() {
        this.$refs.rescuemanageraudittable.listTableData(this.tableSearchParam, this.currentPage, this.pageSize)
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      getTotal(total) {
        this.total = total
      }
    }
  }
</script>
